<script setup>

</script>

<template>
  <div class="h-screen flex flex-col">
    <!-- 头部 -->
    <header class="flex flex-row justify-center bg-blue-500 p-4 text-white">
      <el-container class="title-bar flex flex-row items-end justify-between">
        <div class="hover:cursor-pointer">
          <slot name="title-bar" />
        </div>
        <div class="items-bottom h-full flex flex-row self-end">
          <slot name="header-bar" />
        </div>
      </el-container>
    </header>

    <!-- 主要内容区域 -->
    <div class="flex flex-1 flex-row justify-center overflow-hidden bg-gray-200">
      <div class="main h-full flex-1 bg-gray-100">
        <slot name="main" />
      </div>
    </div>
  </div>
</template>

<style>
.title-bar {
  height: 60px;
  max-width: 1190px;

  span:hover {
    /* background-color: var(--el-color-primary-light-3); */
    color: var(--el-color-primary-light-5);
    cursor: pointer;
  }
}

.main {
  max-width: 1190px;
}
</style>
